<template>
  <div class="custom-tree-container">
    <h1>讨论区</h1>
    <el-tree :data="data" default-expand-all highlight-current node-key="id" :expand-on-click-node="false">
      <template #default="{ node, data }">
        <span class="custom-tree-node">

          <span>
            <el-tag>默认用户名</el-tag>
            <el-divider direction="vertical" />
            {{ node.label }}
          </span>
          <el-button type="primary" @click="append(data)">回复</el-button>
        </span>
      </template>
    </el-tree>


    <el-dialog title="评论信息" v-model="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="你的昵称" :label-width="formLabelWidth">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="评论内容" :label-width="formLabelWidth">
          <el-input v-model="form.content"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { ElMessage, ElMessageBox } from 'element-plus'
let id = 1000;

export default {
  name: 'DiscussionView',
  data() {

    const data = [{
      id: 1,
      label: '这是一个评论',
      name: 'dyldw',
      children: [{
        id: 2,
        label: '这是对评论的回复',
        name: 'dyldw',
        children: [
          {
            id: 3,
            label: '这是回复的回复',
            name: 'dyldw',
            children: [{
              id: 3,
              label: '这是回复的回复的回复',
              name: 'dyldw',
              children: [{
                id: 3,
                label: '这是回复的回复的回复的回复',
                name: 'dyldw',
                children: [{
                  id: 3,
                  label: '这是回复的回复的回复的回复的回复',
                  name: 'dyldw',
                  children: [],
                },],
              },],
            },],
          },
          {
            id: 3,
            label: '这是回复的回复2',
            name: 'dyldw',
            children: [],
          },
        ]
      }]
    },];
    return {
      dialogFormVisible: false,
      form: {
        name: 'dyldw',
        content: 'hello',
      },
      data: JSON.parse(JSON.stringify(data)),
      //data: JSON.parse(JSON.stringify(data))
    }
  },

  methods: {
    append(data) {
      // this.dialogFormVisible = true;
      ElMessageBox.prompt('请输入评论内容', '评论内容', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      })
        .then(({ value }) => {
          const newChild = { id: id++, label: `${value}`, name: '默认用户名', children: [] };
          if (!data.children) {
            this.$set(data, 'children', []);
          }
          data.children.push(newChild);
          ElMessage({
            type: 'success',
            message: `你的评论是: ${value}`,
          });
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消评论',
          });
        });


    },

    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
    },
  }
};
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>